<template>
  <canvas id="haibao_canvas" style="display: none;"></canvas>
  <img id="haibao_img" src="@/assets/haibao.jpg" @load="load" style="display: none;">
  <md-landscape v-model="show">
    <img :src="haibao">
  </md-landscape>
</template>

<script setup>
import { ref, nextTick, defineExpose } from 'vue'
import QRCode from 'qrcode'
import { userData } from '@/model/user'

const haibao = ref('')
const show = ref(false)
const wallet = userData.value.uuid

const open = () => {
  show.value = true
}

const load = () => {
  QRCode.toDataURL(location.origin + '/#/?wallet=' + wallet, { errorCorrectionLevel: 'H', margin: 5}).then(qrcodeData => {
    
    let canvas = document.getElementById('haibao_canvas')
    let ctx = canvas.getContext('2d');
    // 海报大小
    canvas.width = 500;
    canvas.height = 666;

    // 二维码
    var qrcode = new Image();
    qrcode.src = qrcodeData
    qrcode.onload = () => {
      // 海报背景
      ctx.drawImage(document.getElementById('haibao_img'), 0, 0, 500, 666);
      // 二维码
      ctx.drawImage(qrcode, 285, 405, 200, 200);
      // 钱包地址
      ctx.fillStyle="#ffffff";
      ctx.font="18px Arial";
      ctx.fillText("种子钱包 Seed wallet", 60, 490);
      ctx.font="16px Arial";
      ctx.fillText(wallet.substr(0, 20), 60, 530);
      ctx.fillText(wallet.substr(20, 200), 60, 555);

      haibao.value = canvas.toDataURL()
    }
  })
}

defineExpose({ open })
</script>